import React, { useContext, useEffect } from "react";
import classNames from "classnames";
import { TabsContenx } from "./tabs";

export interface TabItemProps {
  index?: string;
  label: React.ReactNode;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  children: React.ReactNode;
}

const TabItem: React.FC<TabItemProps> = (props) => {
  const context = useContext(TabsContenx);
  const { index, label, className, style, disabled, children } = props;
  const handleClick = () => {
    if (!disabled) {
      context.onSelect(index);
      context.onBack(children);
    }
  };

  useEffect(() => {
    console.log(context.index, index);
    if (index === "tab-0") {
      context.onBack(children);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const classes = classNames("zs-tab-item", className, {
    "zs-is-disabled": disabled,
    "zs-is-active": context.index === index,
  });

  return (
    <li className={classes} style={style} onClick={handleClick}>
      <div>{label}</div>
    </li>
  );
};

export default TabItem;
